<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onBeforeUnmount, PropType, Ref,
  ref,
} from 'vue';
  import { dispose } from 'echarts';
  import { getStaticSoptEm } from '@/api/dashboard/workspace';
  import {useECharts} from "@/hooks/web/useECharts";

  export default defineComponent({
    name: 'MarkerActivity',
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '280px',
      },
    },
    setup(props) {
      const last = ref<any>({
        bytesSent: '0B',
        bytesRecv: '0B',
        down: '0',
        up: '0',
      });
      const staticSoptEm = ref({
        zt_count: 0,
        dt_count: 0,
        zf_gt_7: 0,
        zf_bt_57: 0,
        zf_bt_25: 0,
        zf_bt_02: 0,
        zf_bt_0_n_2: 0,
        zf_bt_n_2_n_5: 0,
        zf_bt_n_5_n_7: 0,
        zf_lt_7: 0,
        zf_zero: 0,
      });
      const loadStaticSoptEm = async () => {
        return await getStaticSoptEm();
      };
      const chartRef = ref<HTMLDivElement | null>(null);
      // eslint-disable-next-line vue/no-setup-props-destructure
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

      onBeforeUnmount(() => {
        if (chartRef.value !== null) {
          dispose(chartRef.value as HTMLDivElement);
        }
      });
      onBeforeMount(() => {
        loadStaticSoptEm().then((res) => {
          console.log(res);
          staticSoptEm.value = res.data;
          const option = ref({
            backgroundColor: '#fff',
            tooltip: {
              formatter: function (param) {
                console.log(param);
                return param.data.type + ':' + param.value + '个';
              },
            },
            grid: {
              left: '30%',
              top: 'top',
              right: '1%',
              containLabel: true,
            },
            xAxis: [
              {
                show: false,
              },
              {
                show: true,
              },
            ],
            yAxis: {
              type: 'category',
              inverse: true,
              show: true,
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              data: [
                {
                  value: '>7%',
                },
                {
                  value: '7%~5%',
                },
                {
                  value: '5%~2%',
                },
                {
                  value: '2%~0%',
                },
                {
                  value: '平家数',
                },
                {
                  value: '0%~-2%',
                },
                {
                  value: '-2%~-5%',
                },
                {
                  value: '-5%~-7%',
                },
                {
                  value: '<-7%',
                },
              ],
            },
            series: [
              {
                name: '整体分类',
                type: 'pie',
                radius: [0, '20%'],
                center: ['16.5%', '30%'],
                label: {
                  position: 'inner',
                },
                itemStyle: {
                  normal: {
                    borderColor: '#fff',
                    borderWidth: 2,
                    color: function (params) {
                      switch (params.data.type) {
                        case '涨停':
                          return '#fd666d';
                        case '涨':
                          return '#fd666d';
                        case '跌停':
                          return '#008c3c';
                        case '跌':
                          return '#008c3c';
                        case '平':
                          return '#b0a9a9';
                      }
                    },
                  },
                },

                selectedMode: 'single',
                data: [
                  {
                    value: staticSoptEm.value.zt_count,
                    type: '涨停',
                  },
                  {
                    value: staticSoptEm.value.dt_count,
                    type: '跌停',
                  },
                ],
              },
              {
                name: '招标方式',
                type: 'pie',
                radius: ['50%', '55%'],
                center: ['16.5%', '30%'],

                itemStyle: {
                  normal: {
                    color: function (params) {
                      switch (params.data.type) {
                        case '涨停':
                          return '#fd666d';
                        case '涨':
                          return '#fd666d';
                        case '跌停':
                          return '#008c3c';
                        case '跌':
                          return '#008c3c';
                        case '平':
                          return '#b0a9a9';
                      }
                    },
                  },
                },
                label: {
                  normal: {
                    formatter: function (params) {
                      if (params.value != 0) return params.data.type + ':' + params.value + '个';
                      else return '';
                    },
                    show: true,
                  },
                },

                data: [
                  {
                    value: 310,
                    type: '涨',
                  },
                  {
                    value: 234,
                    type: '跌',
                  },
                  {
                    value: 35,
                    type: '平',
                  },
                ],
              },
              {
                show: true,
                type: 'bar',
                barGap: '100%',
                barWidth: '25%',
                z: 2,
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: '#000',
                      fontSize: 15,
                      fontWeight: 'normal',
                    },
                    position: 'right',
                  },
                },
                itemStyle: {
                  color: (val) => {
                    if (val.dataIndex < 4) {
                      return '#fd666d';
                    } else if (val.dataIndex == 4) {
                      return '#b0a9a9';
                    } else {
                      return '#008c3c';
                    }
                  },
                  barBorderRadius: 10,
                },
                data: [
                  {
                    value: 310,
                    type: '涨',
                  },
                  {
                    value: 234,
                    type: '跌',
                  },
                  {
                    value: 35,
                    type: '平',
                  },
                  {
                    value: 310,
                    type: '涨',
                  },
                  {
                    value: 234,
                    type: '跌',
                  },
                  {
                    value: 35,
                    type: '平',
                  },
                  {
                    value: 310,
                    type: '涨',
                  },
                  {
                    value: 234,
                    type: '跌',
                  },
                  {
                    value: 35,
                    type: '平',
                  },
                ],
                encode: {
                  x: 'nums',
                },
              },
            ],
          });

          option.value.series[0].data[0].value = staticSoptEm.value.zt_count;
          option.value.series[0].data[1].value = staticSoptEm.value.dt_count;
          option.value.series[1].data[0].value =
            staticSoptEm.value.zf_gt_7 +
            staticSoptEm.value.zf_bt_57 +
            staticSoptEm.value.zf_bt_25 +
            staticSoptEm.value.zf_bt_02;
          option.value.series[1].data[1].value =
            staticSoptEm.value.zf_bt_0_n_2 +
            staticSoptEm.value.zf_bt_n_2_n_5 +
            staticSoptEm.value.zf_bt_n_5_n_7 +
            staticSoptEm.value.zf_lt_7;
          option.value.series[1].data[2].value = staticSoptEm.value.zf_zero;
          option.value.series[2].data[0].value = staticSoptEm.value.zf_gt_7;
          option.value.series[2].data[1].value = staticSoptEm.value.zf_bt_57;
          option.value.series[2].data[2].value = staticSoptEm.value.zf_bt_25;
          option.value.series[2].data[3].value = staticSoptEm.value.zf_bt_02;
          option.value.series[2].data[4].value = staticSoptEm.value.zf_zero;
          option.value.series[2].data[5].value = staticSoptEm.value.zf_bt_0_n_2;
          option.value.series[2].data[6].value = staticSoptEm.value.zf_bt_n_2_n_5;
          option.value.series[2].data[7].value = staticSoptEm.value.zf_bt_n_5_n_7;
          option.value.series[2].data[8].value = staticSoptEm.value.zf_lt_7;
          setOptions(option.value);
        });
      });
      return {
        chartRef,
        last,
      };
    },
  });
</script>

<style scoped>
  .chart-item-container {
    width: 100%;

    .chart-item {
      height: 300px;
      width: 1800px;
    }
  }
</style>
